import { Image, View } from '@tarojs/components';
import "./waterfall.less";

const Waterfall = ({ imageList }) => {

    // // 获取图片高度
    // const getImageHeight = (url) => {
    // 	console.log('查询图片高度')
    // 	return new Promise((resolve, reject) => {
    // 		Taro.getImageInfo({
    // 			src: url,
    // 			success: (res) => {
    // 				const { width, height } = res;
    // 				const imgHeight = 300 / width * height; // 瀑布流列宽为 300
    // 				console.log('计算图片高度：', imgHeight)
    // 				resolve(imgHeight);
    // 			},
    // 			fail: (err) => {
    // 				reject(err);
    // 			}
    // 		})
    // 	})
    // }

    // useEffect(() => {
    // 	// 获取每张图片的高度
    // 	imageList.forEach((item, index) => {
    // 		getImageHeight(item.url)
    // 			.then((result) => {
    // 				console.log('获取图片高度结束：', result);
    // 			}).catch((error) => {
    // 				console.log('获取图片高度异常：', error);
    // 			});
    // 		;
    // 	})
    // }, [imageList])

    return (
        <View className='waterfall'>
            <View className='column column1'>
                {imageList.map((item, index) => {
                    if (index % 2 === 0) {
                        return (
                            <View className='column-item' style={{ height: `${item.height}px` }}>
                                <Image src={item.url} mode='aspectFill' />
                            </View>
                        )
                    }
                })}
            </View>
            <View className='column column2'>
                {imageList.map((item, index) => {
                    if (index % 2 === 1) {
                        return (
                            <View className='column-item' style={{ height: `${item.height}px` }}>
                                <Image src={item.url} mode='aspectFill' />
                            </View>
                        )
                    }
                })}
            </View>
        </View>
    );
}

export default Waterfall;
